<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            padding-top: 6px;
            padding-bottom: 6px;
        }

        li {
            display: inline;
        }

        a:link,
        a:visited {
            font-weight: bold;
            color: #FFFFFF;
            background-color: #98bf21;
            text-align: center;
            padding: 6px;
            text-decoration: none;
            text-transform: uppercase;
        }

        a:hover,
        a:active {
            background-color: #7A991A;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>

    <p><b>注意:</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。 </p>
</body>

</html>